import React from 'react';
import { connect } from 'dva'
import { Card, Tag } from 'antd';
import DescriptionList from 'components/DescriptionList';
import PageHeaderLayout from 'components/Layout/PageHeaderLayout';
import List from './List';
import OrderFilterUnExpand from 'components/Filter/OrderFilterUnExpand'


const financialAccountBalanceRecords = ({ location, dispatch, financialAccountBalanceRecord, loading, app }) => {

  const { items, pagination, distributor, financialAccountId, isExpand } = financialAccountBalanceRecord;

  const listProps = {
    dataSource: items,
    loading: loading.effects['financialAccountBalanceRecord/query'],
    pagination,
    pageChangeAction: 'financialAccountBalanceRecord/query',
    dispatch,
    location,
  };

  const breadcrumbList = [
    {
      title: '财务管理',
      href: '/financialAccountBalance'
    }, {
      title: '余额流水',
      href: '/financialAccountBalance'
    }
  ];
  const filterProps = {
    filterItems: [
      {
        type: 'input',
        id: 'sourceId',
        title: '单据编号',
      },
      {
        type: 'select',
        id: 'businessType',
        title: '业务类型',
        options: [
          {
            value: null,
            name: '所有'
          }, {
            value: 'CHARGE',
            name: '充值'
          },
          {
            value: 'CONTRACTCHANGE',
            name: '合同变更'
          }, {
            value: 'PLACE_ORDER',
            name: '下单'
          }
          , {
            value: 'BALANCE_WITHHOLD',
            name: '余额调减'
          }
          // , {
          //   value: 'BALANCE_CHARGE',
          //   name: '余额调增'
          // }
        ]
      },
      {
        type: 'input',
        id: 'memo',
        title: '备注',
      },
      {
        type: 'input',
        id: 'clientName',
        title: '客户姓名',
      },
      {
        type: 'input',
        id: 'amount',
        title: '金额',
      }, {
        type: 'dateRule',
        id: 'createTime',
        dateFormat: 'YYYY/MM/DD HH:mm:ss',
        title: '变动时间'
      }
    ],
    isExpand,
    noExpand() {
      dispatch({ type: 'financialAccountBalanceRecord/unExpandFilter', payload: {} })
    },
    expand() {
      dispatch({ type: 'financialAccountBalanceRecord/expandFilter', payload: {} })
    },
    onFilterChange(value) {
      dispatch({
        type: 'financialAccountBalanceRecord/query',
        payload: {
          ...value,
          financialAccountId: financialAccountId
        }
      })
    }
  }
  console.info(app.user)
  return (
    <PageHeaderLayout title="余额流水" breadcrumbList={breadcrumbList}>
      <Card bordered={false}>
        <DescriptionList
          size="large"
          title={<span><div>当前账户：{distributor.accountName} {_.isArray(app.user.roles) && app.user.roles.some((item) => {
            return item.name === "ROLE_ADMIN";
          }) && ("——当前门店：" + distributor.distributorName)} —— 当前余额：<span style={{ color: 'red' }}>{distributor.balance}</span>(元)</div>
            {distributor.isThirdPartAccount === "false" && <div style={{ marginTop: 20 }}> <span style={{ fontSize: "small", marginLeft: 10 }}>累计分润：</span><Tag color="red">
              ￥ {distributor.totalProfits}
              元</Tag></div>}
          </span>
          }
          style={{
            marginBottom: 10
          }}>
        </DescriptionList>
        <OrderFilterUnExpand {...filterProps} />
        <List {...listProps} />
      </Card>
    </PageHeaderLayout>
  )
};

export default connect(({ financialAccountBalanceRecord, app, loading }) => ({ financialAccountBalanceRecord, app, loading }))(financialAccountBalanceRecords)
